<template>
  <div id="Statistics">
    <div class="block" style="padding-left: 30px; padding-top: 50px">
      <div>
        <span class="demonstration">选择:</span>
        <el-cascader
          v-model="statistics_z_t.data"
          :options="options"
          clearable
          @handleChange="handleChange"></el-cascader>
        <el-button type="primary" @click="getCallData">查看考勤</el-button>
      </div>

      <el-table :data="statistics_data"
                v-show="statistics_data.length !== 0"
                style="width: 100%;margin-top: 50px"
                height="950">
        <el-table-column
          fixed
          prop="id"
          :label="statistics_biaotou[statistics_now_state][0]"
          width="120">
        </el-table-column>
        <el-table-column
          prop="name"
          :label="statistics_biaotou[statistics_now_state][1]"
          width="120">
        </el-table-column>
        <el-table-column
          prop="all_number"
          :label="statistics_biaotou[statistics_now_state][2]"
          width="200">
        </el-table-column>
        <el-table-column
          prop="at_number"
          :label="statistics_biaotou[statistics_now_state][3]"
          width="200">
        </el-table-column>
        <el-table-column
          prop="rate"
          :label="statistics_biaotou[statistics_now_state][4]"
          width="200">
        </el-table-column>
        <el-table-column
          prop="no_at_number"
          :label="statistics_biaotou[statistics_now_state][5]"
          width="200">
        </el-table-column>
        <el-table-column :label="statistics_biaotou[statistics_now_state][6]">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleSetting(scope.$index, scope.row)">{{statistics_biaotou[statistics_now_state][7]}}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import {statistics_zhou} from '../../data'
  import {mapState} from 'vuex'
  export default {
    computed: {
      ...mapState(['statistics_data', 'statistics_biaotou', "statistics_now_state", "statistics_z_t"]),
    },
    data(){
      return {
        value: [],
        options: statistics_zhou
      }
    },
    methods: {
      handleChange(value) {
        this.$store.dispatch("set_statistics_z_t", value)
      },
      handleSetting(index, row) {
        if(this.$store.state.statistics_now_state === 2){
          // alert("none")
          // this.$store.state.see_grade_id = row.grade_id
          this.$store.dispatch("set_see_options").then(()=>[
            this.$store.dispatch('get_today_calls_from_statistics', row.class_id).then(
              ()=>{
                this.$router.push('/admin/see')
              }
            )
          ])

          return
        }
        console.log("row:", row)
        this.$store.dispatch("change_statistics_now_state")
        this.$store.dispatch("get_call_data", row)
      },
      async getCallData() {
        await this.$store.dispatch("clear_statistics", ["statistics_data", "statistics_now_state"])
        this.$store.dispatch("get_call_data")
        // this.$set(this.$store.state.students_with_call_info, index, row)
      }
    }
  }
</script>

<style scoped>
  #Statistics {
    background-color: white;
    height: 1000px;
  }
</style>
